require.config({
  baseUrl: "./script/",
  paths: {
    three: '../../lib/three'
  }
})

require(['three'], function (THREE) {
  const width = window.innerWidth
  const height = window.innerHeight;
  const container = document.createElement('div');
  document.body.appendChild(container);
  const canvas = document.createElement('canvas');
  container.appendChild(canvas);


  const renderer = new THREE.WebGLRenderer({
    canvas: canvas
  });
  renderer.setClearColor(0x000000); // black

  const scene = new THREE.Scene();

  const camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
  camera.position.set(0, 0, 5);
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  scene.add(camera);

  const material = new THREE.MeshBasicMaterial({
    color: 0xffffff // white
  });
  // plane
  const planeGeo = new THREE.PlaneGeometry(1.5, 1.5);
  const plane = new THREE.Mesh(planeGeo, material);
  plane.position.x = 1;
  scene.add(plane);

  // triangle
  const triGeo = new THREE.Geometry();
  triGeo.vertices = [
    new THREE.Vector3(0, -0.8, 0),
    new THREE.Vector3(-2, -0.8, 0),
    new THREE.Vector3(-1, 0.8, 0)
  ];
  triGeo.faces.push(new THREE.Face3(0, 2, 1));
  const triangle = new THREE.Mesh(triGeo, material);
  scene.add(triangle);

  renderer.render(scene, camera);
})